<template>
	<view class="page">
		<!-- #ifndef APP-PLUS -->
		<video :src="src" controls id="myVideo" :poster="cover" style="height: 225px;" class="w-100"></video>
		<!-- #endif -->
		<scroll-view scroll-y class="position-relative" :style="'height:'+scrollH+'px;'">
			<!-- 选项卡 -->
			<view class="flex align-stretch border-bottom border-light-secondary bg-white f-video-tab">
				<view class="flex-1 flex justify-center align-center" v-for="(item,index) in tabBars" :key="index" @click="changeTab(index)">
					<text class="py-1" :class="tabIndex === index ? 'border-main text-main':''" :style="tabIndex===index ? 'border-bottom: 5rpx solid;':''">{{item.name}}</text>
				</view>
			</view>
			<!-- 占位 -->
			<view style="height: 80rpx;"></view>
			<view v-if="tabIndex === 0" class="animated faster fadeIn">
				<!-- 简介 -->
				<view class="px-3 border-bottom border-light-secondary">
					<!-- 头像|关注 -->
					<view class="flex align-center py-3">
						<avatar src="/static/demo/userpic/10.jpg" @click="openSpace"></avatar>
						<view class="flex-1">
							<view class="font-md line-h text-main">{{detail.user.nickname||detail.user.username}}</view>
							<text class="text-muted font-sm">{{fensCount}}粉丝</text>
						</view>
						<main-button @click="doFollow" v-if="user_id!==detail.user_id">{{follow?'取消关注':'关注'}}</main-button>
					</view>
					<!-- 标题 -->
					<view class="font-md line-h">{{detail.title}}</view>
					<!-- 视频信息 -->
					<view class="flex align-center justify-between text-muted py-1">
						<view class="flex align-center">
							<text class="iconfont iconbofangshu font-md mr-1"></text>
							<text class="font-sm">{{detail.play_count}}</text>
							<text class="iconfont icondanmushu font-md ml-2 mr-1"></text>
							<text class="font-sm">{{detail.danmu_count}}</text>
							<text class="font-sm ml-2 mr-1">{{detail.created_time|formatTime}}</text>
						</view>
						<view class="">
							<view class="rounded py-1 px-1 bg-main text-white animated fast" style="line-height: 1;" hover-class="bg-main-hover pulse"
							 @click="doFava">
								{{fava?'取消收藏':'收藏'}}
							</view>
						</view>
					</view>
				</view>
				<!-- 选集 -->
				<view class="border-bottom border-light-secondary">
					<view class="flex align-center px-3 py-2">
						<text class="font-md">选集</text>
						<view class="text-light-muted font flex align-center ml-auto" @click="openMenus">
							共{{videos.length}}集 <text class="iconfont iconjinru"></text>
						</view>
					</view>
					<scroll-view scroll-x="true" class="scroll-row mb-3">
						<view @click="changeVideo(item,index)" class="scroll-row-item ml-2 border rounded  p-2" style="width: 300rpx;" v-for="(item,index) in videos" :key="index"
						 :class="activeIndex===index ? 'border-main text-main' : 'border-light-secondary text-muted'">
							<text class="font">第{{index+1}}集</text>
							<view class="text-ellipsis font-md">
								{{item.title}}
							</view>
						</view>
					</scroll-view>
				</view>
				<media-list type="one" v-for="(item,index) in hot" :key="index" :item="item" :index="index"></media-list>
			</view>
			<view v-else class="animated faster fadeIn px-3 py-2">
				<!-- 评论 -->
				<view class="uni-comment-list" v-for="(item,index) in comments" :key="index">
					<view class="uni-comment-face">
						<avatar :src="item.send_user.avatar||'/static/demo/userpic/10.jpg'"></avatar>
					</view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<text class="font text-main">{{item.send_user.nickname||item.send_user.username}}</text>
						</view>
						<view class="uni-comment-date">
							<view>{{item.created_time|formatTime}}</view>
							<view class="iconfont icongengduoda px-2 py-1" hover-class="bg-light" style="margin-top: -20rpx;"></view>
						</view>
						<view class="uni-comment-content">{{item.content}}</view>
						<!-- 回复内容 -->
						<view class="bg-light rounded p-2 d-flex flex-wrap a-center mt-1" v-for="(item2,index2) in item.comments" :key="index2">
							<text class="text-dark">{{item2.send_user.nickname||item2.send_user.username}}</text>
							<text class="text-main">回复</text>
							<text class="text-main">{{item2.reply_user.nickname||item2.reply_user.username}}</text>
							<text @click="openComment(item.id,item2.reply_user)">{{item2.content}}</text>
						</view>
					</view>
				</view>
				<view class="position-fixed flex align-center justify-center bg-main rounded-circle animated fast" hover-class="bg-main-hover pulse"
				 style="width: 120rpx;height: 120rpx;right: 50rpx;bottom: 50rpx;" @click="openComment(0)">
					<text class="text-white iconfont iconjia"></text>
				</view>
			</view>
		</scroll-view>

		<!-- 选集菜单 -->
		<uni-popup ref="showpopup" type="bottom">
			<view class="bg-white" :style="'height:'+popupHeight+'px;'">
				<view class="flex align-center justify-between" style="height: 90rpx;">
					<text class="font-md pl-3">选集</text>
					<view style="height: 90rpx;width: 90rpx;" class="flex align-center justify-center" hover-class="bg-light" @click="closeMenus">
						<text class="iconfont iconguanbi text-light-muted"></text>
					</view>
				</view>
				<scroll-view scroll-y="true" :style="'height: '+menuHeight+'px;'" show-scrollbar>
					<view class="flex flex-wrap">
						<view class="p-2" @click="changeVideo(item,index)" style="width: 50%;box-sizing: border-box;" v-for="(item,index) in videos" :key="index">
							<view class="border rounded p-2" :class="activeIndex===index ? 'border-main text-main' : 'border-light-secondary text-muted'">
								<text class="font">第{{index+1}}集</text>
								<view class="text-ellipsis font-md">
									{{item.title}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<f-popup ref="comment">
			<view class="position-absolute bottom-0 left-0 right-0 bg-white animated faster fadeIn" @click.stop="stop">
				<view style="height: 100rpx;" class="flex align-center px-3">
					<input type="text" v-model="content" class="bg-light rounded mr-3 px-2 flex-1" style="height: 60rpx;" :placeholder="reply_user.id?('回复:'+(reply_user.nickname||reply_user.username)):'说点什么...'" />
					<view @click="sendComment" class="flex align-center justify-center rounded bg-main text-white py-1 px-2 ml-auto" hover-class="bg-main-hover">
						<text class="font">发布</text>
					</view>
				</view>
			</view>
		</f-popup>

	</view>
</template>

<script>
	import mediaList from '@/components/common/media-list.vue';
	import avatar from '@/components/common/avatar.vue';
	import mainButton from '@/components/common/main-button.vue';
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	import fPopup from '@/components/common/f-popup.vue';
	import $data from '@/common/test/data.js';
	import $T from '@/common/time.js';
	let videoCtx=null
	import {
		mapState
	} from 'vuex';

	let TOP = null

	export default {
		components: {
			mediaList,
			avatar,
			fPopup,
			mainButton,
			uniPopup
		},
		data() {
			return {
				list: $data.getListOne(),
				tabIndex: 0,
				tabBars: [{
					name: "简介"
				}, {
					name: "评论"
				}],
				scrollH: 300,
				detail: {
					"created_time": 0,
					"id": 0,
					"title": "",
					"cover": "",
					"category_id": 0,
					"user_id": 0,
					"duration": 0,
					"desc": "",
					"play_count": 0,
					"danmu_count": 0,
					"updated_time": "",
					"userId": 0,
					"user": {
						"id": 0,
						"username": "",
						"nickname": "",
						"avatar": ""
					}
				},
				videos: [],
				activeIndex: 0,
				id: 0,
				hot: [],
				cover: '',
				src: '',
				fava: false,
				follow: false,
				comments: [],
				comment: false,
				content:'',
				reply_id:0,
				reply_user:{
					id:0,
					username:'',
					nickname:''
				},
				fensCount:0,
				followCount:0
			}
		},
		filters: {
			formatTime(value) {
				return $T.gettime(value)
			}
		},
		computed: {
			popupHeight() {
				return this.scrollH / 3 * 2
			},
			menuHeight() {
				return this.popupHeight - uni.upx2px(90)
			},
			...mapState({
				user_id: state => {
					return state.user ? state.user.id : 0
				}
			})
		},
		mounted() {
			videoCtx=uni.createVideoContext('myVideo')
		},
		onLoad(e) {
			if (!e.id) {
				uni.showToast({
					title: '非法访问',
					icon: 'none'
				});
				return uni.navigateBack({
					delta: 1
				})
			}
			let res = uni.getSystemInfoSync()
			this.scrollH = res.windowHeight - 225
			this.id = e.id
			this.$H.get('/video_read/' + e.id, {
				token: true,
				noJump: true,
				toast: false
			}).then(res => {
				this.hot = res.hot
				this.detail = res.video
				this.videos = res.video.video_details
				this.cover = res.video.cover
				this.fava = res.fava
				this.follow = res.follow
				this.src = res.video.video_details[this.activeIndex].url
				this.getComments()
				this.getUserInfo()
				// #ifdef APP-PLUS
				uni.$emit('video',{
					event:'init',
					params:{
						videos:this.videos,
						activeIndex:this.activeIndex,
						poster:this.cover
					}
				})
				// #endif
				
				// 获取关注
			})
		},

		methods: {
			stop(){},
			getUserInfo(){
				this.$H.get('/user/user_info?user_id='+this.detail.user_id).then(res=>{
					this.fensCount=res.fensCount
					this.followCount=res.followCount
				})
			},
			sendComment(){
				this.$H.post('/comment',{
					content:this.content,
					reply_id:this.reply_id,
					reply_user_id:this.reply_user.id,
					video_id:this.detail.id
				},{token:true}).then(res=>{
					uni.showToast({
						title: '评论成功',
						icon:'none'
					});
					this.$refs.comment.hide()
					this.getComments()
				})
			},
			getComments() {
				this.$H.get('/video_comment/' + this.id).then(res => {
					this.comments = res
				})
			},
			doFollow() {
				let url = this.follow ? '/user/unfollow' : '/user/follow'
				let msg = this.follow ? '取消关注成功' : '关注成功'
				this.$H.post(url, {
					follow_id: this.detail.user_id
				}, {
					token: true
				}).then(res => {
					this.follow = !this.follow
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				})
			},
			doFava() {
				let url = this.fava ? '/user/unfava' : '/user/fava'
				let msg = this.fava ? '取消收藏成功' : '收藏成功'
				this.$H.post(url, {
					follow_id: this.detail.user_id
				}, {
					token: true
				}).then(res => {
					this.fava = !this.fava
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				})
			},
			changeTab(index) {
				this.tabIndex = index
			},
			changeVideo(item,index){
				videoCtx.stop()
				this.activeIndex=index
				this.src=item.url
				// #ifndef APP-PLUS
				setTimeout(()=>{
					videoCtx.play()
				},1000)
				// #endif
				// #ifdef APP-PLUS
				uni.$emit('video',{
					event:'change',
					params:{
						activeIndex:this.activeIndex
					}
				})
				// #endif
				
			},
			openSpace() {
				uni.navigateTo({
					url: '../user-space/user-space?user_id='+this.detail.user_id,
				});
			},
			// 打开选集菜单
			openMenus() {
				this.$refs.showpopup.open()
			},
			closeMenus() {
				this.$refs.showpopup.close()
			},
			// 弹出选集
			openComment(reply_id=0,reply_user={
					id:0,
					username:'',
					nickname:''
				}) {
				if(reply_user.id===this.user_id){
					return
				}
				this.reply_id=reply_id
				this.reply_user=reply_user
				this.content=''
				this.$refs.comment.show()
			}
		}
	}
</script>

<style>
	.page {
		line-height: 1;
		overflow: hidden !important;
	}

	.f-video-tab {
		position: fixed;
		left: 0;
		right: 0;
		height: 80rpx;
		z-index: 10;
		/* #ifndef APP-PLUS */
		top: 225px;
		/* #endif */
		/* #ifdef H5 */
		top: 268px;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
	}
</style>
